<template>
	<view class="reader-container" @click="toggleControls">
		<!-- 顶部控制栏 -->
		<view class="top-controls" v-if="showControls">
			<view class="back-btn" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="book-title">{{bookTitle}}</view>
			<view class="placeholder"></view>
		</view>
		
		<!-- 阅读内容区域 -->
		<view class="content-container">
			<swiper class="content-swiper" 
				:current="currentPage" 
				@change="onPageChange"
				:duration="300"
				:disable-touch="false">
				<swiper-item v-for="(page, index) in pages" :key="index">
					<scroll-view class="page-scroll" scroll-y>
						<view class="page-content">
							<view class="chapter-title" v-if="index === 0">{{currentChapter.title}}</view>
							<text class="content-text">{{page}}</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 底部控制栏 -->
		<view class="bottom-controls" v-if="showControls">
			<view class="chapter-nav">
				<view class="prev-chapter" @click.stop="prevChapter" :class="{disabled: chapterIndex <= 0}">
					<text>上一章</text>
				</view>
				<view class="chapter-progress">
					<text>{{chapterIndex + 1}}/{{chapters.length}}</text>
				</view>
				<view class="next-chapter" @click.stop="nextChapter" :class="{disabled: chapterIndex >= chapters.length - 1}">
					<text>下一章</text>
				</view>
			</view>
			<view class="reading-settings">
				<view class="setting-item" @click.stop="decreaseFontSize">
					<text>A-</text>
				</view>
				<view class="setting-item" @click.stop="increaseFontSize">
					<text>A+</text>
				</view>
				<view class="setting-item" @click.stop="toggleTheme">
					<text>{{isDarkMode ? '日间' : '夜间'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookId: null,
				bookTitle: '三体',
				chapterIndex: 0,
				currentPage: 0,
				showControls: false,
				isDarkMode: false,
				fontSize: 18,
				chapters: [
					{ 
						title: '第一章 疯狂的科学家', 
						content: '文化大革命如火如荼地进行着，天文学家叶文洁在期间历经劫难，被调往红岸基地。红岸基地表面上是军方的一个雷达站，实际上是搜寻地外文明的秘密基地。\n\n叶文洁的父亲在批斗会上被学生活活打死，这让她对人类失望透顶。她在一次偶然的机会中，发现了红岸基地的真正用途，并决定利用设备向宇宙发送包含地球坐标的信息。\n\n在太阳系的另一边，三体文明收到了这个信息。三体世界位于半人马座比邻星，是一个被三颗恒星所困扰的世界。由于三体星系的特殊性，行星轨道呈现混沌状态，导致文明周期性地毁灭和重建。\n\n三体世界的统治者决定入侵地球，并派出了一支舰队。然而，由于星际距离遥远，这支舰队需要450年才能到达地球。为了阻止地球科技的发展，三体人向地球派出了智子，这是一种能够在量子层面干扰人类科学实验的超级智能质子计算机。\n\n与此同时，地球上出现了一个名为"三体"的神秘网络游戏，吸引了大量科学家参与。游戏中模拟了三体世界的环境和历史，玩家需要想办法解决三体问题，即预测三颗太阳的运动轨迹。\n\n在中国，警方发现多名科学家离奇自杀，而这些人都曾参与"三体"游戏。纳米材料研究员汪淼被安全部门招募，调查这一系列事件。他在调查过程中接触到了"科学边界"组织，这是一个由全球顶尖科学家组成的秘密团体，他们已经知道了三体文明的存在。\n\n随着调查的深入，汪淼逐渐了解到了更多关于三体文明的信息，以及地球上已经形成的"地球三体组织"，这是一群期待三体人到来的人类叛徒。他们认为人类文明已经腐朽不堪，需要被更高级的文明所取代。\n\n最终，人类发现了智子的存在，意识到三体文明的威胁。面对这一危机，联合国成立了"面壁计划"，选拔四位"面壁者"'
					},
					{ 
						title: '第二章 三体问题', 
						content: '三体问题是天体力学中的经典难题，指的是三个天体在相互引力作用下的运动问题。在三体世界中，这个问题直接关系到文明的存亡。\n\n由于三颗恒星的不规则运动，三体世界经历了无数次的毁灭与重建。有时三颗恒星会靠得很近，导致行星表面温度极高，一切生命都被烤焦；有时三颗恒星会远离行星，导致极度寒冷，生命被冻结。\n\n三体人经过漫长的进化，已经能够将自己脱水，进入休眠状态，以度过恶劣的环境。每当环境适宜时，他们就会苏醒，重建文明。然而，这种周而复始的毁灭与重建让三体人对未来充满了绝望。\n\n当他们接收到来自地球的信息时，他们看到了希望。地球环境稳定，只有一颗恒星，是理想的栖息地。于是，三体人决定入侵地球，占领这个稳定的世界。\n\n为了准备入侵，三体人开发了一种名为"智子"的超级计算机，它们能够在量子层面干扰人类的科学实验，阻止人类科技的发展。同时，他们也在地球上发展了一批同情者，即"地球三体组织"的成员，这些人将协助三体舰队的入侵。\n\n在地球上，科学家们开始注意到一系列奇怪的现象：物理实验的结果变得不可预测，基础物理定律似乎被打破。这些异常现象引起了科学界的恐慌，许多顶尖科学家选择自杀。\n\n汪淼作为一名纳米材料研究员，也遇到了类似的问题。他的实验结果变得混乱无序，这让他陷入了深深的困惑。正是这种困惑引导他接触到了"科学边界"组织，并最终了解到了三体文明的存在。\n\n随着调查的深入，人类逐渐意识到了三体入侵的威胁。面对这一危机，联合国启动了"面壁计划"，选拔了四位"面壁者"，其中包括天文学家罗辑。这些人被赋予了特殊的权力和资源，目的是制定对抗三体入侵的战略。\n\n然而，面壁者们面临着一个几乎不可能完成的任务：如何对抗一个技术水平远超人类的文明？如何在智子的监视下制定秘密计划？这些问题将决定人类文明的命运。'
					},
					{ 
						title: '第三章 射手和农场主', 
						content: '罗辑在成为面壁者后，开始了一段看似荒诞的生活。他要求联合国为他建造一座豪华别墅，并找来一位美丽的女性作为伴侣。这些行为让人类社会对他充满了质疑，认为他在浪费资源，没有认真对待面壁计划。\n\n然而，罗辑的这些行为实际上是一种伪装，目的是混淆三体人的判断。在与前联合国秘书长萨伊的一次谈话中，罗辑提出了一个假设性的问题：如果宇宙中存在一种能够毁灭任何文明的武器，那么拥有这种武器的文明是否就能够威慑其他文明？\n\n这个问题引发了罗辑的深思。他回忆起叶文洁曾经告诉他的一个理论：宇宙就像一个黑暗森林，每个文明都是带枪的猎人，他们小心翼翼地潜行，因为任何暴露自己位置的文明都可能被其他文明消灭。\n\n基于这个理论，罗辑提出了"黑暗森林法则"：1. 宇宙中的生存是第一需要；2. 文明不断扩张但宇宙中的物质总量保持不变；3. 由于光速限制，文明之间无法有效沟通。在这种情况下，一旦发现其他文明，最安全的做法就是立即消灭它，以防止它在未来对自己构成威胁。\n\n罗辑意识到，如果能够向宇宙广播三体世界的坐标，那么其他可能存在的高级文明就会根据黑暗森林法则消灭三体文明，从而间接保护地球。这就是他的计划：利用宇宙中的其他文明作为威慑，迫使三体人放弃入侵地球。'
					}
				],
				pages: [],
				currentChapter: null
			}
		},
		onLoad(options) {
			if (options.id) {
				this.bookId = parseInt(options.id);
			}
			if (options.chapter) {
				this.chapterIndex = parseInt(options.chapter);
			}
			this.loadChapter();
		},
		methods: {
			loadChapter() {
				this.currentChapter = this.chapters[this.chapterIndex];
				// 将章节内容分页
				this.splitContent();
				this.currentPage = 0;
			},
			splitContent() {
				// 简单实现，实际项目中应该根据屏幕大小和字体大小动态计算
				const content = this.currentChapter.content;
				const pageSize = 500; // 每页字符数
				this.pages = [];
				
				// 按段落分割内容
				const paragraphs = content.split('\n\n');
				let currentPage = '';
				
				for (let i = 0; i < paragraphs.length; i++) {
					if (currentPage.length + paragraphs[i].length + 2 <= pageSize) {
						if (currentPage) {
							currentPage += '\n\n';
						}
						currentPage += paragraphs[i];
					} else {
						this.pages.push(currentPage);
						currentPage = paragraphs[i];
					}
				}
				
				if (currentPage) {
					this.pages.push(currentPage);
				}
			},
			toggleControls() {
				this.showControls = !this.showControls;
			},
			goBack() {
				uni.navigateBack();
			},
			onPageChange(e) {
				this.currentPage = e.detail.current;
			},
			prevChapter() {
				if (this.chapterIndex > 0) {
					this.chapterIndex--;
					this.loadChapter();
				}
			},
			nextChapter() {
				if (this.chapterIndex < this.chapters.length - 1) {
					this.chapterIndex++;
					this.loadChapter();
				}
			},
			decreaseFontSize() {
				if (this.fontSize > 14) {
					this.fontSize -= 2;
					// 重新分页
					this.splitContent();
				}
			},
			increaseFontSize() {
				if (this.fontSize < 24) {
					this.fontSize += 2;
					// 重新分页
					this.splitContent();
				}
			},
			toggleTheme() {
				this.isDarkMode = !this.isDarkMode;
			}
		}
	}
</script>

<style>
	.reader-container {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
	}
	
	.reader-container.dark {
		background-color: #222;
		color: #ccc;
	}
	
	.top-controls {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: rgba(255, 255, 255, 0.9);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 30rpx 0;
		z-index: 100;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.back-icon {
		font-size: 40rpx;
		color: #333;
	}
	
	.book-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
	
	.placeholder {
		width: 60rpx;
	}
	
	.content-container {
		width: 100%;
		height: 100%;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}
	
	.content-swiper {
		width: 100%;
		height: 100%;
	}
	
	.page-scroll {
		height: 100%;
		width: 100%;
	}
	
	.page-content {
		padding: 120rpx 30rpx 30rpx;
		box-sizing: border-box;
	}
	
	.chapter-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		text-align: center;
	}
	
	.content-text {
    padding-top: 20rpx;
		font-size: 32rpx;
		color: #333;
		line-height: 1.8;
		text-indent: 2em;
	}
	
	.bottom-controls {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 20rpx 30rpx;
		z-index: 100;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.chapter-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.prev-chapter, .next-chapter {
		padding: 10rpx 20rpx;
		background-color: #d81e06;
		color: #fff;
		border-radius: 30rpx;
		font-size: 28rpx;
	}
	
	.chapter-progress {
		font-size: 28rpx;
		color: #666;
	}
	
	.disabled {
		background-color: #ccc;
		color: #fff;
	}
	
	.reading-settings {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.setting-item {
		padding: 10rpx 30rpx;
		background-color: #f0f0f0;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #333;
	}
</style>